{% extends "personnel/base.html" %}

{% block page_link %}
    <script src="../../static/system_setup/js/UserList.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        input {
            padding-left: 1%;
        }
        .file {
            position: relative;display: inline-block;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: white;text-decoration: none;text-indent: 0;line-height: 20px;background: #1E90FF;
        }
        .file input {
            position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
        }
        .file:hover {
            background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
        }
        .search {
            width: 20%;display: flex;float: right;margin: 5.5px 0;margin-right: 0.5%;
        }
        .search input {
            vertical-align: middle;float: left;height: 29px;width: 77%;outline: none;border: 1px solid #0070c1;box-sizing: border-box;border-bottom-left-radius: 2px;border-top-left-radius: 2px;
        }
        .search button {
            float: right;flex: 1;height: 29px;line-height: 29px;background-color: #0070c1;color: white;border-style: none;outline: none;border-bottom-right-radius: 2px;border-top-right-radius: 2px;
        }
        .search button i {
            font-style: normal;
        }
        .search button:hover {
            font-size: 16px;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        .div_clase {
            display: inline-block;width: 300px;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;
        }
        #addForm {
            width: 800px;height: 620px;background: #F5F5F5;position: absolute;border: #dfdfdf solid 1px;margin: auto;border-radius: 3px;top: 50%;left: 50%;transform: translate(-50%, -50%);display: none;z-index: 10100;font-size: 0;
        }
        #title {
            display: flex;justify-content: space-between;box-sizing: border-box;padding: 0 10px;height: 50px;color: #0b0b0b;cursor: move;width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
        .search1 {
            width: 300px;display: flex;float: right;margin: 10px 0;margin-right: 1%;
        }
        .search1 input {
            vertical-align: middle;float: left;height: 30px;width: 230px;outline: none;border: 1px solid #0070c1;box-sizing: border-box;border-bottom-left-radius: 3px;border-top-left-radius: 3px;
        }
        .search1 button {
            float: right;flex: 1;height: 30px;width: 70px;line-height: 30px;background-color: #0070c1;color: white;border-style: none;outline: none;border-bottom-right-radius: 3px;border-top-right-radius: 3px;
        }
        .search1 button i {
            font-style: normal;
        }
        .search1 button:hover {
            font-size: 16px;
        }
        .fadenum {
            background-color: green;width: 500px;height: 300px;animation: fadenum 1s 1;
        }
        @keyframes fadenum {
            0% {opacity: 0;} 100% {opacity: 1;}
        }
        .button_for_control {
            width: 80px;height: 30px;border: 1px solid #99D3F5;background: #D0EEFF;border-radius: 3px;letter-spacing: 0;line-height: 30px;color: #089bab;margin: 5px 0;
        }
        .bulk_operation {
            height: 30px;width: 90%;border-radius: 3px;letter-spacing: 6px;background: #cecece;border: #cecece solid 1px;color: white;display: none;
        }
        .bulk_operation:hover {
            background: #999999;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="display: inline-block;vertical-align: top;width: 50%;height: 40px;">
            <div style="width: 100px;text-align: center;height: 100%;line-height: 40px;display: inline-block;vertical-align: top;">
                <a href="/system-setup/download_excel">
                    <button style="height: 30px;width: 90%;border-radius: 3px;letter-spacing: 6px;" type="button"
                            class="btn btn-safe add-station1">导出
                    </button>
                </a>
            </div>

            <div style="width: 100px;text-align: center;height: 100%;line-height: 40px;display: inline-block;vertical-align: top;">
                <button style="height: 30px;width: 90px;border-radius: 3px;letter-spacing: 6px;" data-toggle="modal"
                        data-target=".bd-example-modal-xl" onmousemove="page_zhanshi()" onmouseout="page_yincang()"
                        id="add_station" type="button" class="btn btn-default add-station">新增
                </button>
            </div>

            <div style="width: 100px;text-align: center;height: 100%;line-height: 40px;display: inline-block;vertical-align: top;">
                <button onclick="ConfirmDelete(1)" data-toggle="modal" data-target=".bd-example-modal-sm"
                        style="height: 30px;width: 90%;border-radius: 3px;letter-spacing: 6px;background: #ff2222;"
                        type="button"
                        class="btn btn-danger add-station1">已冻结
                </button>
            </div>

            <div style="width: 100px;text-align: center;height: 100%;line-height: 40px;display: inline-block;vertical-align: top;">
                <button onclick="ConfirmDelete(0)" data-toggle="modal" data-target=".bd-example-modal-sm"
                        style="height: 30px;width: 90%;border-radius: 3px;letter-spacing: 6px;background: #00a854;"
                        type="button"
                        class="btn btn-danger add-station1">未冻结
                </button>
            </div>

            <div style="width: 100px;text-align: center;height: 100%;line-height: 40px;display: inline-block;vertical-align: top;">
                <button onclick="ConfirmDelete(3)" data-toggle="modal" data-target=".bd-example-modal-sm"
                        style="height: 30px;width: 90%;border-radius: 3px;letter-spacing: 6px;background: #2db7f5;"
                        type="button"
                        class="btn btn-danger add-station1">全部人员
                </button>
            </div>

            <div style="width: 100px;text-align: center;height: 100%;line-height: 40px;display: inline-block;vertical-align: top;">
                <button id="BulkOperation" onclick="" data-toggle="modal" data-target=".bd-example-modal-sm"
                        type="button"
                        class="btn btn-danger add-station1 bulk_operation">批量冻结
                </button>
            </div>

        </div>

        <div id="page_one" onmousemove="page_zhanshi()" onmouseout="page_yincang()"
             style="z-index: 1000; position: absolute; width: 90px; height: auto;left: 20%; top: 80px;background: #FFFFFF; box-shadow: rgb(204 204 204) 2px 2px 10px;padding: 5px;display: none;">
            <button class="button_for_control">
                <a href="new_user.html">
                    新增
                </a>
            </button>
            <a href="javascript:;" class="file button_for_control" style="text-align: center;line-height: 23px;">
                导入
                <input type="file" name="" id="upload_roster" onchange="upload_roster()">
            </a>
            <button class="button_for_control" style="margin-top: -2px;">
                <a href="../../static/iss_model/人员名单模板.xlsx">下载模板</a>
            </button>
        </div>
        {#        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">#}
        {#            <button onclick="model_line()" style="height: 30px;width: 90%;border-radius: 3px;" class="btn btn-default add-station">上班时间设定#}
        {#            </button>#}
        {#        </div>#}

        <div class="search">
            <input type="text" placeholder="请输入姓名或部门..." name="user" id="search_data" value="">
            <button class="search-action">搜索</button>
        </div>

    </div>

    <div id="my_application" style="width: 100%;height: 95%;overflow: auto;background-color: white;">
        <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
            <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <section class="grid-main" style="height: 100%;">
                    <table id="main_table"></table>
                </section>
            </div>
        </div>
    </div>

    <div id="new_models1" class="shade" style="display: none">
        <div id="new_models" style="width: 100%;height: 100%;position: absolute;">
            <div class="fadenum"
                 style="width: 900px;height: 700px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 2px;border: #dfdfdf solid 1px;">
                <div id="box"
                     style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 2px;border-top-right-radius: 2px;">
                    <h5 id="modal-title" class="modal-title"
                        style="line-height: 40px;width: 15%;margin-left: 1%;display: inline-block;">用户详情</h5>
                    <span onclick="close_models()"
                          style="float: right;line-height: 40px;padding-right: 2%;cursor: pointer;"><i
                            class="iconfont icon-quchu"></i></span>
                </div>
                <hr>
                <div style="height: 620px;width: 100%;padding-top: 2%;overflow: auto;background: white;">
                    <div style="margin-top: 2%;padding-left: 5%;width:100%;">
                        <span style="color: red;">*</span>
                        <label for=""> 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="real_name" type="text" placeholder=" 姓名" disabled>

                        <span style="color: red;margin-left: 5%;">*</span>
                        <label for=""> 登录账号：</label>
                        <a style="width:35%;" id="username">登录账号</a>
                    </div>

                    <div style="margin-top: 2%;padding-left: 5%;width:100%;">
                        <span style="color: red;">*</span>
                        <label for=""> 所属科室：</label>
                        <input id="department"
                               style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               type="text" placeholder=" 所属科室" onclick="show_model()">

                        <span style="color: red;margin-left: 5%;">*</span>
                        <label for="">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
                        <a style="width:35%;" id="gender">登录账号</a>
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%;">
                        <label for=""> 学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</label>
                        <select name="" id="education"
                                style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;">
                            <option id="中专" value="中专">中专</option>
                            <option id="大专" value="大专">大专</option>
                            <option id="本科" value="本科">本科</option>
                            <option id="硕士" value="硕士">硕士</option>
                            <option id="博士" value="博士">博士</option>
                            <option id="博士后" value="博士后">博士后</option>
                            <option id="其他" value="其他">其他</option>
                        </select>

                        <label style="margin-left: 6%;" for=""> 婚姻状况：</label>
                        <select name="" id="marital_status"
                                style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;">
                            <option id="单身" value="单身">单身</option>
                            <option id="已婚" value="已婚">已婚</option>
                        </select>
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%;">
                        <label for=""> 政治面貌：</label>
                        <select name="" id="political_outlook"
                                style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;">
                            <option value="群众">群众</option>
                            <option value="团员">团员</option>
                            <option value="党员">党员</option>
                        </select>

                        <label style="margin-left: 6%;" for="">
                            民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="nation" type="text" placeholder=" 民族">
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%;">
                        <label for=""> 身份证号：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="ID_number" type="text" placeholder=" 身份证号">

                        <label style="margin-left: 6%;" for="">
                            籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="native_place" type="text" placeholder=" 籍贯">
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%;">
                        <label for=""> 专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="major" type="text" placeholder=" 专业">

                        <label style="margin-left: 6%;" for=""> 毕业院校：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="graduated_university" type="text" placeholder=" 毕业院校">
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%;">
                        <label for=""> 职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="position" type="text" placeholder=" 职称">

                        <label style="margin-left: 6%;" for=""> 家庭住址：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="home_address" type="text" placeholder=" 家庭住址">
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%;">
                        <label for=""> 电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="mobile" type="text"
                               placeholder=" 电话">

                        <label style="margin-left: 6%;" for="">
                            邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
                        <input style="width: 300px;padding-left: 3px;border-radius: 3px;border: #cfcfcf 1px solid;height: 30px;"
                               id="mailbox" type="text"
                               placeholder=" 邮箱">
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%; ">
                        <label for="" style="vertical-align: top;"> 备注说明：</label>
                        <textarea name="" id="remarks" cols="60" rows="3"
                                  style="width: 88%;border-color: #cfcfcf;border-radius: 3px;outline: none;"></textarea>
                    </div>

                    <div style="margin-top: 2%;padding-left: 6%;width:100%;height: 40px;">
                        <div style="width: 100%;display: inline-block;vertical-align: top;">
                            <div style="display: inline-block;vertical-align: top;height: 75px;">
                                <a href="javascript:;" class="file" style="margin-top: 25px;">
                                    <i class="iconfont icon-upload"></i> 上传签名
                                    <input type="file" name="" id="signature_picture"
                                           onchange="upload_signature_picture()">
                                </a>
                            </div>
                            <div style="display: inline-block;vertical-align: top;width: 65%;text-align: left;"
                                 id='signature_picture_url_div'>
                                <img id='signature_picture_url_img' src="" height="75" width="150">
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div style="width: 100%;height: 40px;text-align: right;padding-right: 2%;">
                    <button onclick="update_user()"
                            style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 2px;border-radius: 2px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="addForm">
        <!-- 标题 -->
        <div id="title">
            <h5 style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;font-size: 18px;">所属科室</h5>
            <div class="search1"
                 style="vertical-align: center;display: inline-block;text-align: right;margin-left: 35%;font-size: 14px;">
                <input type="text" placeholder="请输入..." name="" id="search_data1" value="">
                <button onclick="search_dep()" id="search_button">搜索</button>
            </div>
            <span onclick="close_models1()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i
                    class="iconfont icon-quchu"></i></span>
        </div>
        <hr>
        <div id="processed"
             style="width: 100%;height: 500px;overflow: auto;vertical-align: top;left: 0;padding-left: 2%;">
            {% for company in company_list %}
                <div style="display: inline-block;width: 300px;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;">
                    <input class="check_box" id="{{ company.name }}({{ company.id }})"
                           type="checkbox"> {{ company.name }}
                </div>
            {% endfor %}
        </div>

        <hr>
        <div style="height: 70px;padding-right: 2%;font-size: 14px;">
            <button onclick="summit_val()" id="model-affirm2"
                    style="border-radius: 3px;height: 30px;float: right;margin-top: 15px;border: #1E90FF solid 1px;background: #1E90FF;color: white;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </button>
        </div>
    </div>

    <div id="new_models2" class="shade">
        <div id="new_models3" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 570px;height: 300px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box3"
                     style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h5 id="modal-title" class="modal-title"
                        style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;">上班时间</h5>
                    <span onclick="close_models3()"
                          style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i
                            class="iconfont icon-quchu"></i></span>
                </div>
                <hr>
                <div style="height: 200px;width: 100%;padding-top: 2%;padding-left: 2%;">
                    <div id="Administrative">
                        <p>行政科室</p>
                        <div style="display: inline-block;vertical-align: top;">
                            <label for=""><span style="color: red;">* </span>上班时间：</label>
                            <input id="AdministrativeWorkTime" type="text"
                                   style="border-radius: 4px;border: #cfcfcf solid 1px;outline: none;width: 90%;"
                                   placeholder="08:00:00">
                        </div>
                        <div style="display: inline-block;vertical-align: top;">
                            <label for=""><span style="color: red;">* </span>下班时间：</label>
                            <input id="AdministrativeOffTime" type="text"
                                   style="border-radius: 4px;border: #cfcfcf solid 1px;outline: none;width: 90%;"
                                   placeholder="18:00:00">
                        </div>
                    </div>

                    <div id="clinical" style="margin-top: 2%;">
                        <p>临床医技科室</p>
                        <div style="display: inline-block;vertical-align: top;">
                            <label for=""><span style="color: red;">* </span>上班时间：</label>
                            <input id="ClinicalWorkTime" type="text"
                                   style="border-radius: 4px;border: #cfcfcf solid 1px;outline: none;width: 90%;"
                                   placeholder="08:00:00">
                        </div>
                        <div style="display: inline-block;vertical-align: top;">
                            <label for=""><span style="color: red;">* </span>下班时间：</label>
                            <input id="ClinicalOffTime" type="text"
                                   style="border-radius: 4px;border: #cfcfcf solid 1px;outline: none;width: 90%;"
                                   placeholder="18:00:00">
                        </div>
                    </div>
                </div>
                <hr>
                <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                    <button id="iss_summit_but3" onclick="work_time_commit()"
                            style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 10px;border-radius: 3px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
        var company_list = {{ company_list | safe }};
        var checked_id_list = [];
        $('#search_data').bind('keydown', function (event) {
            var event = window.event || arguments.callee.caller.arguments[0];
            if (event.keyCode === 13) {
                search_data();
            }
        });

        function online_tag(user_index) {
            view_details(user_index);
            document.getElementById("new_models1").style.display = "table-row";
        }

        function close_models() {
            document.getElementById("new_models1").style.display = "none";
        }

        let title = document.querySelector("#box");
        let addForm = document.querySelector("#new_models");

        title.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm.offsetLeft;
            let y = e.pageY - addForm.offsetTop;

            document.addEventListener("mousemove", move);

            function move(e) {
                addForm.style.left = e.pageX - x + 'px';
                addForm.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function export_excel() {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/system-setup/SuperSU_Pro.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        {#var JsonDate = JSON.parse(xhr.responseText);#}
                        {#console.log(JsonDate)#}
                    }
                }
            };
        }

        function upload_signature_picture() {
            // document.getElementById("loading").style.display = "inline";
            var form = new FormData();
            var files = document.getElementById("signature_picture").files[0];
            console.log(files)
            var username = document.getElementById("username").innerText;
            form.append('files', files);
            form.append('username', username);

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/system-setup/update-signature-picture", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);

                        if (JsonDate['code'] === 200) {
                            document.getElementById("signature_picture_url_img").src = JsonDate['data']["signature_picture"];
                            document.getElementById("signature_picture").value = "";
                        } else {
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function close_models1() {
            document.getElementById("addForm").style.display = "none";
        }

        let title1 = document.querySelector("#title");
        let addForm1 = document.querySelector("#addForm");

        title1.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm1.offsetLeft;
            let y = e.pageY - addForm1.offsetTop;


            document.addEventListener("mousemove", move);

            function move(e) {
                addForm1.style.left = e.pageX - x + 'px';
                addForm1.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function show_model() {
            document.getElementById("addForm").style.display = "table-row";
        }

        function search_dep() {
            var search_keyword = document.getElementById("search_data1").value;
            var processed = document.getElementById("processed");
            processed.innerHTML = "";
            console.log(company_list.length)
            for (var h = 0; h < company_list.length; h++) {
                if (company_list[h]["name"].indexOf(search_keyword) !== -1) {
                    console.log(company_list[h]["name"])
                    var div_tag = document.createElement("div");
                    div_tag.className = "div_clase";
                    div_tag.innerHTML = '<input class="check_box" id="' + company_list[h]["name"] + '(' + company_list[h]["id"] + ')' + '" type="checkbox"> ' + company_list[h]["name"];
                    processed.appendChild(div_tag)
                }
            }
        }

        function summit_val() {
            var cleck_box_list = document.getElementsByClassName("check_box");
            var xuanzhong = ""
            for (var t = 0; t < cleck_box_list.length; t++) {
                if (cleck_box_list[t].checked) {
                    xuanzhong = xuanzhong + cleck_box_list[t].id + ", "
                }
            }
            document.getElementById("department").value = xuanzhong.slice(0, -2);
            document.getElementById("addForm").style.display = "none";
        }

        const gridManagerName = "test",
            TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
            GM_PUBLISH_METHOD_MAP = {
                init: {key: "init", relyInit: !1, title: "初始化", code: 'demo1.initGM(document.querySelector("table"));'},
                get: {key: "get", relyInit: !0, title: "获取表格的实时配置信息", code: `GridManager.get('${gridManagerName}');`},
                version: {key: "version", relyInit: !1, title: "获取当前GridManager的版本号", code: "GridManager.version;"},
                getLocalStorage: {
                    key: "getLocalStorage",
                    relyInit: !0,
                    title: "获取表格用户记忆",
                    code: `GridManager.getLocalStorage('${gridManagerName}');`
                },
                resetLayout: {
                    key: "resetLayout",
                    relyInit: !0,
                    title: "重置表格布局",
                    code: `GridManager.resetLayout('${gridManagerName}', '800px', '500px');`
                },
                clear: {
                    key: "clear",
                    relyInit: !0,
                    title: "清除表格记忆数据",
                    code: `GridManager.clear('${gridManagerName}');`
                },
                getTableData: {
                    key: "getTableData",
                    relyInit: !0,
                    title: "获取指定tr所使用的数据",
                    code: `GridManager.getTableData('${gridManagerName}');`
                },
                getRowData: {
                    key: "getRowData",
                    relyInit: !0,
                    title: "获取指定tr所使用的数据",
                    code: `GridManager.getRowData('${gridManagerName}', document.querySelector("table[grid-manager=${gridManagerName}] tbody tr"));`
                },
                updateRowData: {
                    key: "updateRowData",
                    relyInit: !0,
                    title: "更新指定行所使用的数据",
                    code: `GridManager.updateRowData('${gridManagerName}', 'id', {id: 112, title: 'ccc'});`
                },
                updateTreeState: {
                    key: "updateTreeState",
                    relyInit: !0,
                    title: "更新树的展开状态",
                    code: `GridManager.updateTreeState('${gridManagerName}', true);`
                },
                setSort: {
                    key: "setSort",
                    relyInit: !0,
                    title: "手动设置排序",
                    code: `GridManager.setSort('${gridManagerName}', {createDate: 'ASC'});`
                },
                setConfigVisible: {
                    key: "setConfigVisible",
                    relyInit: !0,
                    title: "设置表头配置区域可视状态",
                    code: `GridManager.setConfigVisible('${gridManagerName}', true);`
                },
                setLineHeight: {
                    key: "setLineHeight",
                    relyInit: !0,
                    title: "配置行的高度",
                    code: `GridManager.setLineHeight('${gridManagerName}', '70px');`
                },
                showTh: {
                    key: "showTh",
                    relyInit: !0,
                    title: "设置列为可视状态",
                    code: `GridManager.showTh('${gridManagerName}', 'pic');`
                },
                hideTh: {
                    key: "hideTh",
                    relyInit: !0,
                    title: "设置列为隐藏状态",
                    code: `GridManager.hideTh('${gridManagerName}', 'pic');`
                },
                exportGrid: {
                    key: "exportGrid",
                    relyInit: !0,
                    title: "导出指定表格",
                    code: `GridManager.exportGrid('${gridManagerName}', 'demo中使用的导出').then(res=>{console.log('success')}).catch(err=>{console.error('error', err)});`
                },
                setQuery: {
                    key: "setQuery",
                    relyInit: !0,
                    title: "更改在生成组件时所配置的参数query",
                    code: `GridManager.setQuery('${gridManagerName}', {'userName':'baukh','sex':'男'});`
                },
                setAjaxData: {
                    key: "setAjaxData",
                    relyInit: !0,
                    title: "用于再次配置ajaxData数据",
                    code: `GridManager.setAjaxData('${gridManagerName}', {data: [{title: '通过setAjaxData动态添加的数据，其它项为空'}], totals: 1});`
                },
                refreshGrid: {
                    key: "refreshGrid",
                    relyInit: !0,
                    title: "刷新表格",
                    code: `GridManager.refreshGrid('${gridManagerName}');`
                },
                renderGrid: {
                    key: "renderGrid",
                    relyInit: !0,
                    title: "渲染表格",
                    code: `GridManager.renderGrid('${gridManagerName}');`
                },
                getCheckedTr: {
                    key: "getCheckedTr",
                    relyInit: !0,
                    title: "获取当前选中的行",
                    code: `GridManager.getCheckedTr('${gridManagerName}');`
                },
                getCheckedData: {
                    key: "getCheckedData",
                    relyInit: !0,
                    title: "获取选中行的渲染数据",
                    code: `GridManager.getCheckedData('${gridManagerName}');`
                },
                setCheckedData: {
                    key: "setCheckedData",
                    relyInit: !0,
                    title: "设置选中的数据",
                    code: `GridManager.setCheckedData('${gridManagerName}', [GridManager.getTableData('${gridManagerName}')[1]]);`
                },
                cleanData: {
                    key: "cleanData",
                    relyInit: !0,
                    title: "清除指定表格数据",
                    code: `GridManager.cleanData('${gridManagerName}');`
                },
                print: {key: "print", relyInit: !0, title: "打印当前页", code: `GridManager.print('${gridManagerName}');`},
                showRow: {
                    key: "showRow",
                    relyInit: !0,
                    title: "显示隐藏行",
                    code: `GridManager.showRow('${gridManagerName}', 1);`
                },
                hideRow: {
                    key: "hideRow",
                    relyInit: !0,
                    title: "隐藏行",
                    code: `GridManager.hideRow('${gridManagerName}', 1);`
                },
                showLoading: {
                    key: "showLoading",
                    relyInit: !0,
                    title: "显示加载中",
                    code: `GridManager.showLoading('${gridManagerName}');`
                },
                hideLoading: {
                    key: "hideLoading",
                    relyInit: !0,
                    title: "隐藏加载中",
                    code: `GridManager.hideLoading('${gridManagerName}', 300);`
                },
                destroy: {
                    key: "destroy",
                    relyInit: !0,
                    title: "消毁指定的GridManager实例",
                    code: `GridManager.destroy('${gridManagerName}');`
                }
            }, arg = {
                gridManagerName: "test",
                width: "100%",
                height: "100%",
                autoOrderConfig: {fixed: "left"},
                checkboxConfig: {key: "id", fixed: "left"},
                supportAjaxPage: !0,
                sortMode: "single",
                supportMenu: !0,
                menuHandler: e => (e.unshift({
                    content: "自定义菜单", line: !0, onClick: e => {
                        alert(e)
                    }
                }), e),
                useCellFocus: !0,
                useHideRow: !0,
                supportMoveRow: !0,
                moveRowConfig: {
                    key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                        console.log(e, t)
                    }
                },
                disableCache: !1,
                ajaxData: function (e, t) {
                    var local_host = window.location.host;          // 获取当前IP
                    return "/personnel/user_list.html"
                },
                exportConfig: {
                    fileName: e => {
                        const t = new Date;
                        let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                        for (let t in e) a = `${a}-${t}=${e[t]}`;
                        return a
                    }, suffix: "xls"
                },
                ajaxType: "POST",
                checkedBefore: function (e, t, a) {
                    return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
                },
                checkedAfter: function (e, t, a) {
                    checked_id_list = []
                    for (var jj=0; jj<e.length; jj++) {
                        if (!checked_id_list.includes(e[jj].id)) {
                            checked_id_list.push(e[jj].id)
                        }
                     }
                },
                checkedAllBefore: function (e, t) {
                    {#console.log("checkedAllBefore==", e, t)#}
                },
                checkedAllAfter: function (e, t) {
                    console.log("checkedAllAfter==", e, t)
                },
                sortingBefore: function (e) {
                    {#console.log("sortingBefore", e)#}
                },
                sortingAfter: function (e) {
                    {#console.log("sortingAfter", e)#}
                },
                ajaxBeforeSend: function (e) {
                    console.log("ajaxBeforeSend")
                },
                ajaxSuccess: function (e) {
                    {#console.log("ajaxSuccess: ", JSON.parse(e)["data"])#}
                    window.JSONdetail = JSON.parse(e)["data"]
                },
                ajaxError: function (e) {
                    console.log("ajaxError")
                },
                ajaxComplete: function (e) {
                    console.log("ajaxComplete")
                },
                adjustBefore: e => {
                    console.log("adjustBefore=>", e)
                },
                adjustAfter: e => {
                    console.log("adjustAfter=>", e)
                },
                responseHandler: e => (e.data.forEach((e => {
                    e.priority = e.id
                })), e),
                rowRenderHandler: (e, t) => e,
                emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
                columnData: [
                    {
                        key: "real_name",
                        text: "姓名",
                        align: "center",
                        width: "100px",
                        disableMoveRow: !0
                    }, {
                        key: "gender",
                        text: "性别",
                        width: "120px",
                        align: "center",
                    }, {
                        key: "department",
                        text: "部门",
                        width: "200px",
                        align: "center",
                    }, {
                        key: "username",
                        text: "工号",
                        width: "120px",
                        align: "center",
                    }, {
                        key: "position",
                        text: "职位",
                        width: "200px",
                        align: "center",
                    }, {
                        key: "mobile",
                        text: "手机号码",
                        width: "150px",
                        align: "center",
                    }, {
                        key: "personnel_category",
                        text: "人员类别",
                        width: "100px",
                        align: "center",
                    }, {
                        key: "freeze",
                        text: "是否冻结",
                        width: "200px",
                        align: "center",
                    }, {
                        key: "action",
                        width: "250px",
                        align: "center",
                        fixed: "right",
                        disableMoveRow: !0,
                        disableRowCheck: !0,
                        text: '<span style="color: red">操作</span>',
                        template: (e, t) => `<a href='#' onclick='online_tag("${t.id}")' id="${t.id}">查看</a> | <a href='#' onclick='chongzhimima(${t.username})'>重置密码</a> | ${t.url}`
                        // template: (e, t) => `<a href='#'>人事合同</a> | <a href='#'>人事档案</a> | <a href='#' onclick='online_tag("${t.id}")' id="${t.id}">查看</a> | <a href='#' onclick='chongzhimima(${t.username})'>重置密码</a>`
                    }]
            }, demo1 = {
                initSearch: function () {
                    document.querySelector(".search-action").addEventListener("click", (function () {
                        var e = {
                            search_value: document.querySelector('[name="user"]').value,
                        };
                        table.GM("setQuery", e, (function () {
                            console.log("setQuery执行成功````````````````", e)
                        }))

                    }))
                }, initFN: () => {

                }, initGM: function () {
                    new window.GridManager(table, arg, (e => {
                        console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                    }))
                }, editRowData: function (e) {
                    window.GridManager.updateRowData("test", "id", {
                        id: window.parseInt(e.getAttribute("data-id")),
                        lastDate: (new Date).getTime()
                    })
                }
            }, table = document.querySelector("table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

        let title3 = document.querySelector("#box3");
        let addForm3 = document.querySelector("#new_models3");

        title3.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm3.offsetLeft;
            let y = e.pageY - addForm3.offsetTop;

            document.addEventListener("mousemove", move);

            function move(e) {
                addForm3.style.left = e.pageX - x + 'px';
                addForm3.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function close_models3() {
            document.getElementById("new_models2").style.display = "none";
        }

        function model_line() {
            document.getElementById("new_models2").style.display = "table-row";
        }

        function work_time_commit() {
            var AdministrativeWorkTime = document.getElementById("AdministrativeWorkTime").value;             //行政上班时间
            var AdministrativeOffTime = document.getElementById("AdministrativeOffTime").value;               //行政下班时间
            var ClinicalWorkTime = document.getElementById("ClinicalWorkTime").value;                         // 临床上班时间
            var ClinicalOffTime = document.getElementById("ClinicalOffTime").value;                           // 临床下班班时间
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/personnel/TimeSetting.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("AdministrativeWorkTime=" + String(AdministrativeWorkTime) + "&AdministrativeOffTime=" + String(AdministrativeOffTime) +
                "&ClinicalWorkTime=" + String(ClinicalWorkTime) + "&ClinicalOffTime=" + String(ClinicalOffTime));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200) {
                            alert("提交成功！");
                            window.location.reload();
                        } else {
                            alert(JsonDate["message"]);
                        }
                    }
                }
            };
        }

        function page_zhanshi() {
            document.getElementById('page_one').style.display = 'inline-block';
        }

        function page_yincang() {
            document.getElementById('page_one').style.display = 'none';
        }

        // 确认删除
        function ConfirmDelete(delete_type) {
            document.getElementById("BulkOperation").style.display = "inline-block";
            if (delete_type === 0) {
                document.getElementById("BulkOperation").innerText = "批量冻结";
                document.getElementById("BulkOperation").setAttribute("onclick", "BatchOperation(1)");
            } else if (delete_type === 1) {
                document.getElementById("BulkOperation").innerText = "批量解冻";
                document.getElementById("BulkOperation").setAttribute("onclick", "BatchOperation(0)");
            } else {
                document.getElementById("BulkOperation").style.display = "none";
            }
            var e = {
                delete_type: delete_type,
            };
            table.GM("setQuery", e, (function () {
                console.log("setQuery执行成功````````````````", e)
            }))
        }

        function upload_roster() {
            document.getElementById("loading").style.display = 'inline-block';
            var form = new FormData();
            var files = document.getElementById("upload_roster").files[0];
            form.append('files', files);

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/system-setup/UploadRoster", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);

                        if (JsonDate['code'] === 200) {
                            alert("更新成功！");
                            document.getElementById("upload_roster").value = "";
                        } else {
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }

        function FreezePersonnel(user_id, user_type, operate_type) {
            if (operate_type === 1) {
                if (user_type === "已冻结") {
                    alert("已冻结账号无需重复操作！")
                    return false
                }
                var sour_flag = confirm("是否确认冻结该账号？")
            } else {
                if (user_type === "正常") {
                    alert("未冻结账号无需重解冻！")
                    return false
                }
                sour_flag = confirm("是否确认解冻该账号？")
            }
            if (sour_flag) {
                document.getElementById("loading").style.display = 'inline-block';
                var form = new FormData();
                form.append('id', user_id);
                form.append('operate_type', operate_type);
                var xhr = new XMLHttpRequest();
                xhr.open('post', "/personnel/freeze_personnel", true);
                xhr.send(form);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            if (JsonDate["code"] === 200) {
                                alert("操作成功！")
                                window.location.reload();
                            }
                        }
                    }
                }
            }
        }

        function BatchOperation(bulk_type) {
            if (bulk_type === 0) {
                var sour_flag = confirm("是否确认解冻该账号？")
            } else {
                sour_flag = confirm("是否确认冻结账号？")
            }
            if (sour_flag) {
                document.getElementById("loading").style.display = 'inline-block';
                var form = new FormData();
                form.append('id_list', checked_id_list);
                form.append('bulk_type', bulk_type);
                var xhr = new XMLHttpRequest();
                xhr.open('post', "/personnel/batch_operation", true);
                xhr.send(form);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            if (JsonDate["code"] === 200) {
                                alert("操作成功！")
                                window.location.reload();
                            }
                        }
                    }
                }
             }
        }
    </script>
{% endblock %}
